<template>
  <div>
    <div style="width: 60%;height: 40px;float: left;">
      <Row type="flex" justify="start" class="code-row-bg" style="float: left; ">
        <div style="height: 40px; line-height: 40px; margin-left: 10px;">
          <a style="color: #3f3f3f;" @click="Back">
            <Icon type="ios-arrow-back" size="20" />
          </a>
          <!-- 返回上一层 -->
          <a style="margin-left: 5px;">
            <Icon type="md-refresh" color="#3f3f3f" size="20" />
          </a>

          <Divider type="vertical" size="default" />
        </div>
        <Breadcrumb>
          <a
            style="height: 50px; line-height: 50px;color: #3f3f3f;"
            @click="aaaaa(index)"
            v-for="(item,index) in path"
          >
            <BreadcrumbItem>
              <Icon type="ios-home-outline"></Icon>
              {{item}}
            </BreadcrumbItem>
          </a>
        </Breadcrumb>
      </Row>
    </div>
    <div style="width: 40%;height: 40px;float: left;">
      <div style="float:left; margin-left:10px; line-height: 35px;">
        <Button size="small" icon="ios-add-circle" @click="NewFolder = true">新建资料库</Button>
        <!-- <Button size="small" icon="ios-add-circle" @click="Deletes" v-show="button">删除</Button> -->
        <Modal title="新建文件夹" v-model="NewFolder" @on-ok="YesFolder" @on-cancel="Nofolder">
          <Input v-model="FolderValue" placeholder="请输入新建文件夹的名称……" style="width: 100%;" />
        </Modal>
      </div>
      <div style="height: 40px;">
        <i-switch
          size="small"
          v-model="switch1"
          @on-change="change"
          style="margin-top: 12px;float: right;margin-right: 10px;"
        />
        <Input
          v-model="SearchValue"
          suffix="ios-search"
          size="small"
          placeholder="搜索"
          style="margin-top: 7px; width: auto; float: right; margin-right: 10px;"
          @on-change="sousuo"
        />
      </div>
    </div>
    <div style="width: 100%;height: 76vh;overflow:auto;">
      <Table
        :columns="columns1"
        :data="list"
        v-if="!switch1"
        @on-selection-change="select"
        @on-row-dblclick="dbClick"
		show-context-menu
        @on-contextmenu="handleContextMenu"
      >
        <template slot="contextMenu">
          <DropdownItem @click.native="handleContextMenuDownload">下载</DropdownItem>
          <DropdownItem @click.native="NewFile = true">重命名</DropdownItem>
          <Modal title="重命名" v-model="NewFile" @on-ok="YesFile" @on-cancel="NoFile">
            <Input v-model="FileValue" placeholder="请输入重命名的名称……" style="width: 100%;" />
          </Modal>
          <DropdownItem @click.native="handleContextMenuCopy" v-if="Copy == true">复制</DropdownItem>
          <DropdownItem @click.native="handleContextMenuCopy" v-else>粘贴</DropdownItem>
          <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
        </template>
      </Table>
    </div>
    <!-- <ul v-for="item in list">
			<h1>{{item.server_filename}}</h1>
    </ul>-->
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      list: [], //文件列表
      button: false, //多选显示按钮
      value: "", //新建文件夹的value
      switch1: false, //切换缩略图
      SearchValue: "", //搜索文件value
      Selection: [], //多选按钮事件
      NewFolder: false, //新建文件夹弹窗
      FolderValue: "", //新建文件夹value
      path: [], //面包屑路径
      button: false,
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "资料库名称",
          key: "name"
        },
        {
          title: "最后修改时间",
          key: "mtime",
          width: 300,
          align: "center"
        },
        {
          title: "文件大小",
          key: "size",
          width: 150,
          align: "center"
        }
      ]
    };
  },
  mounted() {
    //获取文件列表
    this.Refresh();
  },
  methods: {
    aaaaa(row, index) {
      // 获取点击的名字
      var name = this.path[row];
      // 将数组转换字符串
      var Clickpath = this.path.join("/");
      // 截取到点击的路径
      var path = Clickpath.substring(
        0,
        Clickpath.lastIndexOf(name) + name.length
      );
      // 将路径转换成数组
      this.path = path.split("/");
      this.Refresh();
    },
    //刷新文件列表
    Refresh() {
      var _this = this;
      var Token = window.localStorage.getItem("Token");
      axios
        .get("https://cloud.seafile.com/api2/repos/", {
          headers: {
            // 请求头
            Accept: "application/json; indent=4",
            Authorization: "Token " + Token
          }
        })
        .then(function(respanse) {
          console.log(respanse);
          _this.list = respanse.data;
          if (_this.list.length != 0) {
            for (var i = 0; i < _this.list.length; i++) {
              //定义空字符串size
              var size = "";
              //获取数组内的size并赋值变量
              var fileSize = _this.list[i].size;
              //判断文件大小
              if (fileSize < 1024) {
                size = fileSize + "B";
              } else if (fileSize < 1048576) {
                size = (fileSize / 1024).toFixed(1) + "K";
              } else if (fileSize < 1073741824) {
                size = (fileSize / 1048576).toFixed(1) + "M";
              } else {
                size = (fileSize / 1073741824).toFixed(1) + "G";
              }
              // 将数据重新放入到obj数组里面
              var obj = _this.list[i]; //或者 var obj=new Object();
              var key = "size";
              obj[key] = size;
              console.info(obj);

              // 获取文件时间戳
              var time = _this.list[i].mtime;
              // 时间戳换算
              var timestamp4 = new Date(time * 1000);
              //拼接日期
              var FileTime =
                timestamp4.toLocaleDateString().replace(/\//g, "-") +
                " " +
                timestamp4.toTimeString().substr(0, 8);
              // 更改数组
              var key = "mtime";
              obj[key] = FileTime;
              console.info(obj);
            }
          }
        });
    },
    //批量操作
    select(Selection) {
      //对选中的数据 显示按钮，执行操作

      //将选中的数据，存储到数组里面，以便使用
      this.Selection = Selection;

      if (Selection.length != 0) {
        this.button = true;
      } else {
        this.button = false;
      }

      console.log(Selection);
    },
    //缩略图切换
    change(status) {
      this.$Message.info("开关状态：" + status);
    },
    //搜索文件
    sousuo() {
      var Token = window.localStorage.getItem("Token");
      if (this.SearchValue != "") {
        const value = this.SearchValue;
        axios({
          url: "https://cloud.seafile.com/api2/search/?q=" + value,
          method: "get",
          headers: {
            Authorization: "Token " + Token,
            Accept: " application/json; indent=4"
          }
        }).then(res => {
          console.log(res.data.results);
          this.list = res.data.results;
        });
      } else {
        this.Refresh();
      }
    },
    //tab表格双击事件
    dbClick(row) {
      console.log(row);
      window.sessionStorage.setItem("Seafile_id", row.id);
      this.$router.push("/Seafile_Home1");
    },
    //确定新建文件夹
    YesFolder() {
      var Token = window.localStorage.getItem("Token");
      var value = this.FolderValue;
      axios({
        url: "https://cloud.seafile.com/api2/repos/",
        method: "post",
        data: {
          name: value,
          desc: "new library"
        },
        headers: {
          Authorization: "Token " + Token,
          Accept: " application/json; indent=4"
        }
      }).then(res => {
        console.log(res);
        this.$Message.success("新建文件夹：" + value);
        this.Refresh();
      });
    },
    //取消新建文件夹
    Nofolder() {
      this.$Message.warning("已取消新建文件夹！");
    },
    //批量删除
    Deletes() {
      var Selection = this.Selection;
      if (Selection.length != 0) {
        this.$Modal.confirm({
         title: "温馨提示",
         content: "<p>是否需要删除该文件？</p>",
          onOk: () => {
            for (var i = 0; i < Selection.length; i++) {
              var Token = window.localStorage.getItem("Token");
              axios
                .delete(
                  "https://cloud.seafile.com/api2/repos/" + Selection[i].id,
                  {
                    headers: {
                      // 请求头
                      Accept: "application/json; indent=4",
                      Authorization: "Token " + Token
                    }
                  }
                )
                .then(res => {
                  console.log(res);
                  this.Refresh();
                  this.button = false;
                });
            }
            this.$Message.info("删除成功！");
          },
          onCancel: () => {
            this.$Message.info("已经取消删除操作");
          }
        });
      } else {
        this.$Message.error("请先勾选资料库，再执行删除！");
      }
    },
    // 返回上一层
    Back() {
      this.$router.push("/Protocol");
	},
	// 右击事件
	handleContextMenu(row){
		console.log( row)
	}
  }
};
</script>
